.m-message {
  --m-message--success-bg-color: var(--success-color-light-9);
  --m-message--success-border-color: var(--success-color-light-8);
  --m-message--success-text-color: var(--success-color);
  --m-message--error-bg-color: var(--error-color-light-9);
  --m-message--error-border-color: var(--error-color-light-8);
  --m-message--error-text-color: var(--error-color);
  --m-message--warning-bg-color: var(--warning-color-light-9);
  --m-message--warning-border-color: var(--warning-color-light-8);
  --m-message--warning-text-color: var(--warning-color);
  --m-message--info-bg-color: var(--info-color-light-9);
  --m-message--info-border-color: var(--info-color-light-8);
  --m-message--info-text-color: var(--info-color);
  width: fit-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background-color: var(--el-message-bg-color);
  transition: opacity var(--el-transition-duration), transform .4s, top .4s;
  padding: 15px 19px;
  display: flex;
  align-items: center;

  .svg-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-right: 4px;
  }
  
  &.m-message--info {
    background-color: var(--m-message--info-bg-color);
    color: var(--m-message--info-text-color);
    border-color: var(--m-message--info-border-color);
    .svg-icon {
      fill: var(--m-message--info-text-color);
    }
  }
  &.m-message--warning {
    background-color: var(--m-message--warning-bg-color);
    color: var(--m-message--warning-text-color);
    border-color: var(--m-message-warning-border-color);
    .svg-icon {
      fill: var(--m-message--warning-text-color);
    }
  }
  &.m-message--success {
    background-color: var(--m-message--success-bg-color);
    color: var(--m-message--success-text-color);
    border-color: var(--m-message-success-border-color);
    .svg-icon {
      fill: var(--m-message--success-text-color);
    }
  }
  &.m-message--error {
    background-color: var(--m-message--error-bg-color);
    color: var(--m-message--error-text-color);
    border-color: var(--m-message-error-border-color);
    .svg-icon {
      fill: var(--m-message--error-text-color);
    }
  }

  
}